<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缴费订单</title>
    <!--浏览器小图标-->
    <link rel="shortcut icon" href="/img/favicon.png">
    <!--自定义样式-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="/element/element-ui.css">
</head>
<body>
<div>
    <el-container>
        <!--自定义标签-->
        <el-header style="position: fixed;width: 100%;z-index: 1">
            <index-header></index-header>
        </el-header>
        <el-main>
            <el-row>
                <el-col offset="2" span="20">
                    <el-row style="margin-top: 55px">
                        <el-col span="4">
                            <index-left-card></index-left-card>
                        </el-col>
                        <el-col span="20" v-loading="loading">
                            <!--右边卡片-->
                            <el-card shadow="hover">
                                <!--页面内容-->
                                <el-row v-loading="loading">
                                    <el-col>
                                        <el-table :data="inventoryData" height="600" style="width: 100%">
                                            <el-table-column label="就诊医院" prop="hospital"></el-table-column>
                                            <el-table-column label="就诊人" prop="nickname"></el-table-column>
                                            <el-table-column prop="schedulTime" label="就诊日期"></el-table-column>
                                            <el-table-column prop="doctorName" label="医生"></el-table-column>
                                            <el-table-column prop="totalMoney" label="项目费用"></el-table-column>
                                            <el-table-column prop="status" label="缴费状态">
                                                <template slot-scope="scope">
                                                    <div slot="reference">
                                                        <el-tag type="warning" v-show="scope.row.status===0">未缴费
                                                        </el-tag>
                                                        <el-tag type="success" v-show="scope.row.status===1">已缴费
                                                        </el-tag>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作">
                                                <template slot-scope="scope">
                                                    <el-button @click="handleClickCancle(scope.$index)" type="text">
                                                        查阅清单
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <!--对话框-->
                                        <el-dialog
                                                title="项目清单"
                                                :visible.sync="dialogVisible"
                                                width="50%">
                                            <span>诊断结果/症状：</span>
                                            <p style="margin-top: 10px;font-size: 16px;font-weight: bold;">{{inventoryData[inventoryDataIndex].announcements}}</p>
                                            <el-table :data="detailsData" height="300" style="width: 100%;margin-top: 10px">
                                                <el-table-column width="150" label="药物名称" prop="drugName"></el-table-column>
                                                <el-table-column width="50" label="数量" prop="number"></el-table-column>
                                                <el-table-column width="50" label="单价" prop="unitPrice"></el-table-column>
                                                <el-table-column width="50" label="单位" prop="unit"></el-table-column>
                                                <el-table-column label="用量" prop="dosage"></el-table-column>
                                            </el-table>
                                            <span slot="footer" class="dialog-footer">
                                                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                                </span>
                                        </el-dialog>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <!--自定义标签-->
        <el-footer>
            <index-footer></index-footer>
        </el-footer>
    </el-container>
</div>
</body>
<script src="/js/vue.js"></script>
<!--引入自定义header-->
<script src="/js/index-header.js"></script>
<!--引入自定义footer-->
<script src="/js/index-footer.js"></script>
<!--引入自定义卡片card-->
<script src="/js/index-left-card.js"></script>
<!-- 引入Vue和Element UI库 -->
<script src="/element/element-ui.js"></script>
<!--引入axios框架文件-->
<script src="/js/axios.js"></script>
<script type="text/javascript">
    let v = new Vue({
        el: 'body>div',
        data: function () {
            return {
                //对话框
                dialogVisible:false,
                loading: false,
                //用户项目清单
                inventoryData: [],
                //药物清单及医嘱
                inventoryDataIndex:0,
                detailsData:[],
            }
        },
        methods: {
            listInventoryData() {
                let username = localStorage.getItem("currentUsername");
                axios.get("/pa/recipe/listUserRecipeData/" + username, {headers: {token: localStorage.getItem("localJwt")}}).then(function (res) {
                    if (res.data.code === 1) {
                        v.inventoryData = res.data.data;
                    }else {
                        v.$message.info("请先登录！")
                    }
                })
            },
            handleClickCancle(row) {
                v.inventoryDataIndex=row;
                v.dialogVisible=true;
                v.detailsData=v.inventoryData[row].userInventoryListVO;
            }
        },
        mounted() {
            this.listInventoryData();
        },
    })
</script>
</html>
